<template>
    <div class="heading-cards">
        <!--   借阅证搜索和新增    -->
        <el-row class="heading-cards-search-and-new" >
            <!--    查询借阅证功能  -->
            <el-col :span="16">
                <el-input placeholder="请输入内容" v-model="input" class="input-with-select">
                    <el-select v-model="select" slot="prepend" placeholder="请选择">
                        <el-option label="借阅证编号" value="library_card_id"></el-option>
                        <el-option label="学生姓名" value="student_name"></el-option>
                        <el-option label="学生系别" value="student_department"></el-option>
                        <el-option label="学生专业" value="student_major"></el-option>
                        <el-option label="学生电话" value="student_phone"></el-option>
                        <el-option label="当前借书数量" value="student_borrowed_number"></el-option>
                        <el-option label="借阅上限" value="student_limit"></el-option>
                        <el-option label="学号(系统登录账号)" value="student_account"></el-option>
                    </el-select>
                    <el-button slot="append" icon="el-icon-search" @click="searchCard"></el-button>
                </el-input>
            </el-col>
            <!--    新增借阅证功能  -->
            <el-col :span="4" :offset="2">
                <el-button type="primary" icon="el-icon-edit" @click="newCard">新建</el-button>
                <el-dialog title="新增借阅证" :visible.sync="newCardFormVisible" style="width: 60%;margin-left: 20%">
                    <el-form :model="cardForm" ref="cardForm" label-width="120px" class="heading-card-form" >
                        <el-form-item label="学生姓名" prop="id">
                            <el-input v-model="cardForm.name" autocomplete="off" ></el-input>
                        </el-form-item>
                        <el-form-item label="学生系别" prop="password">
                            <el-input v-model="cardForm.department" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="学生专业" prop="email">
                            <el-input v-model="cardForm.major" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="学生手机号" prop="role">
                            <el-input v-model.number="cardForm.phone" autocomplete="off" maxlength="11" show-word-limit></el-input>
                        </el-form-item>
                        <el-form-item label="借阅上限" prop="password">
                            <el-input v-model.number="cardForm.limit" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="学生学号(系统登录账号)" prop="email">
                            <el-input v-model="cardForm.account" autocomplete="off" maxlength="10" show-word-limit></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="card-footer">
                        <el-button @click="newCardFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="submitCardForm">确 定</el-button>
                    </div>
                </el-dialog>
            </el-col>
        </el-row>
        <!--    借阅证信息列表  -->
        <el-table :data="cardsData" style="width: 100%;margin-top: 10px">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="借阅证编号"> <span>{{ props.row.library_card_id }}</span> </el-form-item>
                        <el-form-item label="学生姓名"> <span>{{ props.row.student_name }}</span> </el-form-item>
                        <el-form-item label="学生院系"> <span>{{ props.row.student_department }}</span> </el-form-item>
                        <el-form-item label="学生专业"> <span>{{ props.row.student_major }}</span> </el-form-item>
                        <el-form-item label="学生联系电话"><span>{{ props.row.student_phone }}</span></el-form-item>
                        <el-form-item label="学生当前借阅数"><span>{{ props.row.student_borrowed_number }}</span></el-form-item>
                        <el-form-item label="借阅上限"><span>{{ props.row.student_limit }}</span></el-form-item>
                        <el-form-item label="学号(系统登录账号)"><span>{{ props.row.student_account }}</span></el-form-item>
                        <el-form-item label="是否存在欠缴金额"><span>{{ props.row.student_is_arrears?"存在欠缴":"正常" }}</span></el-form-item>
                        <el-form-item label="借阅证创建时间"> <span>{{ props.row.student_create_time }}</span></el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column label="借阅证编号" prop="library_card_id"> </el-table-column>
            <el-table-column label="学生姓名" prop="student_name"> </el-table-column>
            <el-table-column label="学生当前借阅数" prop="student_borrowed_number"> </el-table-column>
            <el-table-column label="学生学号(系统登录账号)" prop="student_account"> </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="props">
                    <!--    修改借阅证信息  -->
                    <el-button size="mini" @click="cardEdit(props.$index, props.row)">修改</el-button>
                    <el-dialog title="修改借阅证信息" :visible.sync="changeCardFormVisible" style="width: 60%;margin-left: 20%">
                        <el-form :model="changeCardForm">
                            <el-form-item label="借阅证信息的类别">
                                <el-select v-model="changeCardForm.type" placeholder="请选择修改的借阅证信息类别">
                                    <el-option label="学生姓名" value="student_name"></el-option>
                                    <el-option label="学生系别" value="student_department"></el-option>
                                    <el-option label="学生专业" value="student_major"></el-option>
                                    <el-option label="学生联系方式" value="student_phone"></el-option>
                                    <el-option label="当前借书数" value="student_borrowed_number"></el-option>
                                    <el-option label="借阅上限" value="student_limit"></el-option>
                                    <el-option label="欠缴标识" value="student_is_arrears"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="修改的信息">
                                <el-input v-model="changeCardForm.input" type="textarea" :rows="2" placeholder="请输入修改后的内容" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="book-footer">
                            <el-button @click="changeCardFormVisible = false">取 消</el-button>
                            <el-button type="primary" @click="submitChangeCardForm">确 定</el-button>
                        </div>
                    </el-dialog>
                    <!--    删除借阅证信息  -->
                    <el-button size="mini" type="danger" @click="cardDelete(props.$index, props.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--    借阅证列表切换  -->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="defaultPage"
                :page-sizes="pages"
                :page-size="pages[pagesIndex]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalNumber">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: "AdminCards",
        data(){
            return {
                // 借阅证列表
                cardsData: [],
                // 查询借阅证
                input:'',
                select:'',
                // 新增借阅证
                newCardFormVisible:false,
                cardForm:{
                    name:'',
                    department:'',
                    major:'',
                    phone:'',
                    limit:20,
                    account:''
                },
                // 修改借阅证
                changeCardFormVisible:false,
                changeCardForm:{
                    id:'',
                    type:'',
                    input:''
                },
                // 借阅证信息列表分页显示
                defaultPage: 1,
                totalNumber:5,
                pages:[5,10,15,20],
                pagesIndex: 1,
            };
        },
        mounted() {
            this.getCardsList()
        },
        methods:{
            // 页面加载时获取数据库中借阅证列表
            getCardsList(){
                console.log('发送借阅证信息获取请求！')
                this.$axios.get('/cards/list',{
                    params:{
                        role:this.$store.state.user.user_role
                    }
                }).then(res=>{
                    if(res.data.code === 200){
                        this.cardsData = res.data.msg
                        this.totalNumber = res.data.msg.length
                        // console.log(res.data);
                    }else{
                        this.$message({
                            message: '服务器开小差了,请刷新页面重试~~~',
                            type: 'warning'
                        })
                    }
                })
            },
            // 搜索借阅证信息
            searchCard(){
                this.$axios.get('/cards/search',{
                    params: {
                        role:this.$store.state.user.user_role,
                        type:this.select,
                        input:this.input
                    }
                }).then(res=>{
                    if(res.data.code === 200){
                        this.$message({
                            message: '查询借阅证信息成功！',
                            type: 'success'
                        })
                    }else{
                        this.$message({
                            message: '请确认借阅证信息完整性与正确性后重试！',
                            type: 'warning'
                        })
                    }
                    this.cardsData = res.data.msg
                    // console.log(res.data)
                })
            },
            // 点击新建按键
            newCard(){
                this.newCardFormVisible = true
            },
            // 填写完成，点击确定，发送新增借阅证请求
            submitCardForm(){
                this.newCardFormVisible = false
                let submit = true
                // 校检是否已有借书证信息
                console.log('获取是否存在已有借书证')
                this.$axios.get('/cards/search',{
                    params: {
                        role:this.$store.state.user.user_role,
                        type:'student_account',
                        input: this.cardForm.account
                    }
                }).then(res => {
                    // console.log(res.data)
                    if(res.data.msg.length >0){
                        submit = false
                        this.$message({
                            message: '借阅证已存在',
                            type: 'warning'
                        })
                    }
                })
                // 校检是否系统中是否有此学生学号信息
                if(submit){
                    this.$axios.get('/users/search',{
                        params: {
                            role:this.$store.state.user.user_role,
                            type:'user_id',
                            input: this.cardForm.account
                        }
                    }).then(res => {
                        if(res.data.msg.length<1){
                            submit = false
                            this.$message({
                                message: '系统中不存在此人,其先创建其系统信息...',
                                type: 'warning'
                            })
                        }
                    })
                }
                // 根据前面结果判断是否需要创建
                if(submit){
                    console.log('发送创建请求')
                    this.$axios.post('/cards/new',{
                        role:this.$store.state.user.user_role,
                        name:this.cardForm.name,
                        department:this.cardForm.department,
                        major:this.cardForm.major,
                        phone:this.cardForm.phone,
                        limit:this.cardForm.limit,
                        account:this.cardForm.account,
                    }).then(res => {
                        this.cardForm.name= ''
                        this.cardForm.department= ''
                        this.cardForm.major= ''
                        this.cardForm.phone= ''
                        this.cardForm.limit= 20
                        this.cardForm.account= ''
                        switch (res.data.code) {
                            case 200:{
                                this.getCardsList()
                                this.$message({
                                    message: '新建借阅证信息成功！',
                                    type: 'success'
                                })
                                break
                            }
                            case 401:{
                                this.$message({
                                    message: '请登录后重试！',
                                    type: 'warning'
                                })
                                break
                            }
                            case 422:{
                                this.$message({
                                    message: '输入格式有问题,请重新输入！',
                                    type: 'warning'
                                })
                                break
                            }
                            default:{
                                this.$message.error('服务器开小差了,请联系管理员处理~~~');
                            }
                        }
                    })
                }
            },
            // 修改借阅证
            cardEdit(index, row) {
                console.log(index, row);
                this.changeCardForm.id = row.library_card_id
                this.changeCardFormVisible = true
            },
            submitChangeCardForm(){
                // 发送post请求,修改借阅证信息
                console.log('发送修改借阅证信息请求');
                this.changeCardFormVisible = false
                this.$axios.post('/cards/update',{
                    role:this.$store.state.user.user_role,
                    id:this.changeCardForm.id,
                    type:this.changeCardForm.type,
                    input:this.changeCardForm.input
                }).then(res => {
                    // 重新获取借阅证列表
                    this.getCardsList()
                    this.changeCardForm.card_id = ''
                    this.changeCardForm.type = ''
                    this.changeCardForm.input = ''
                    switch (res.data.code){
                        case 200 :{
                            this.$message({
                                message: '修改借阅证信息成功！',
                                type: 'success'
                            })
                            break
                        }
                        case 401:{
                            this.$message({
                                message: '未登录!',
                                type: 'warning'
                            })
                            break;
                        }
                        default:{
                            this.$message({
                                message: '服务器开小差了,请刷新页面后重试...',
                                type: 'warning'
                            })
                        }
                    }
                })
            },
            // 删除借阅证
            cardDelete(index, row) {
                console.log(index, row);
                // 发送post请求
                console.log('发送删除借阅证信息请求')
                this.$axios.post('/cards/update',{
                    role:this.$store.state.user.user_role,
                    id:row.library_card_id,
                    type:'student_is_delete',
                    input:1
                }).then(res => {
                    switch (res.data.code) {
                        case 200:{
                            this.$message({
                                message: '删除成功!',
                                type: 'success'
                            })
                            // 重新获取图书列表
                            this.getCardsList()
                            break;
                        }
                        default:{
                            this.$message({
                                message: '服务器开小差了,请刷新页面后重试...',
                                type: 'warning'
                            })
                        }
                    }
                })
            },
            // 切换每页显示的数量
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            // 切换页面
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            }
        }
    }
</script>

<style scoped>
    .heading-cards{
        margin: 10px;
    }
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
</style>
